import React, { useState } from 'react'
import { Table, DatePicker, Card, Statistic, Select, Button, Modal, Form, Input, message } from 'antd'
import { ArrowUpOutlined, PlusOutlined } from '@ant-design/icons'

const { RangePicker } = DatePicker
const { Option } = Select

function Transactions() {
    const [isModalVisible, setIsModalVisible] = useState(false)
    const [form] = Form.useForm()
    const [transactions, setTransactions] = useState([
        {
            id: 'T001',
            memberName: '张三',
            service: '剪发',
            amount: 88,
            paymentMethod: '微信支付',
            transactionTime: '2024-03-20 15:30',
            operator: '王店长'
        },
        {
            id: 'T002',
            memberName: '李四',
            service: '染发',
            amount: 238,
            paymentMethod: '支付宝',
            transactionTime: '2024-03-20 16:30',
            operator: '王店长'
        }
    ])

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields()
            const newTransaction = {
                id: `T${String(transactions.length + 1).padStart(3, '0')}`,
                ...values,
                transactionTime: new Date().toLocaleString(),
                operator: '王店长'
            }
            setTransactions([newTransaction, ...transactions])
            message.success('交易记录已添加')
            setIsModalVisible(false)
            form.resetFields()
        } catch (error) {
            console.error('Validate Failed:', error)
        }
    }

    const columns = [
        {
            title: '交易编号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '会员姓名',
            dataIndex: 'memberName',
            key: 'memberName',
        },
        {
            title: '交易项目',
            dataIndex: 'service',
            key: 'service',
        },
        {
            title: '交易金额',
            dataIndex: 'amount',
            key: 'amount',
            render: (amount) => `¥${amount.toFixed(2)}`,
        },
        {
            title: '支付方式',
            dataIndex: 'paymentMethod',
            key: 'paymentMethod',
        },
        {
            title: '操作员',
            dataIndex: 'operator',
            key: 'operator',
        },
        {
            title: '交易时间',
            dataIndex: 'transactionTime',
            key: 'transactionTime',
        }
    ]

    const calculateTotal = (data) => {
        return data.reduce((acc, curr) => acc + curr.amount, 0)
    }

    return (
        <div>
            <div className="statistics-cards">
                <Card>
                    <Statistic
                        title="今日营业额"
                        value={calculateTotal(transactions)}
                        precision={2}
                        prefix="¥"
                        suffix={<ArrowUpOutlined style={{ color: '#3f8600' }} />}
                    />
                </Card>
                <Card>
                    <Statistic
                        title="本月营业额"
                        value={calculateTotal(transactions) * 20}
                        precision={2}
                        prefix="¥"
                    />
                </Card>
                <Card>
                    <Statistic
                        title="今日订单数"
                        value={transactions.length}
                        suffix="单"
                    />
                </Card>
            </div>

            <div className="operation-bar">
                <RangePicker />
                <Button
                    type="primary"
                    icon={<PlusOutlined />}
                    onClick={() => setIsModalVisible(true)}
                >
                    新增交易
                </Button>
            </div>

            <Table
                columns={columns}
                dataSource={transactions}
                rowKey="id"
                pagination={{
                    pageSize: 10,
                    showTotal: (total) => `共 ${total} 条记录`
                }}
                summary={pageData => {
                    const total = calculateTotal(pageData)
                    return (
                        <Table.Summary.Row>
                            <Table.Summary.Cell index={0} colSpan={3}>总计</Table.Summary.Cell>
                            <Table.Summary.Cell index={1}>
                                ¥{total.toFixed(2)}
                            </Table.Summary.Cell>
                            <Table.Summary.Cell index={2} colSpan={3} />
                        </Table.Summary.Row>
                    )
                }}
            />

            <Modal
                title="新增交易"
                open={isModalVisible}
                onOk={handleSubmit}
                onCancel={() => {
                    setIsModalVisible(false)
                    form.resetFields()
                }}
            >
                <Form form={form} layout="vertical">
                    <Form.Item
                        name="memberName"
                        label="会员姓名"
                        rules={[{ required: true, message: '请选择会员' }]}
                    >
                        <Select placeholder="请选择会员">
                            <Option value="张三">张三</Option>
                            <Option value="李四">李四</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="service"
                        label="交易项目"
                        rules={[{ required: true, message: '请选择项目' }]}
                    >
                        <Select placeholder="请选择项目">
                            <Option value="剪发">剪发</Option>
                            <Option value="染发">染发</Option>
                            <Option value="烫发">烫发</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="amount"
                        label="交易金额"
                        rules={[{ required: true, message: '请输入金额' }]}
                    >
                        <Input prefix="¥" type="number" />
                    </Form.Item>
                    <Form.Item
                        name="paymentMethod"
                        label="支付方式"
                        rules={[{ required: true, message: '请选择支付方式' }]}
                    >
                        <Select placeholder="请选择支付方式">
                            <Option value="现金">现金</Option>
                            <Option value="微信支付">微信支付</Option>
                            <Option value="支付宝">支付宝</Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default Transactions 